<template>
    <div class="q-pa-md full-height" style="position: relative">

        <ag-grid-vue
            style="height: calc(100vh - 80px);"
            class="ag-theme-alpine"
            :columnDefs="columns"
            :rowData="allData"
            :defaultColDef="defaultColDef"
            :pagination="true"
            :paginationPageSize="20"
            :suppressRowClickSelection="true"
			:localeText="localeText"
            :rowSelection="'multiple'">
        </ag-grid-vue>

    </div>
</template>

<script>
import { AgGridVue } from "ag-grid-vue3";
import { AG_GRID_LOCALE_CN } from '@ag-grid-community/locale';
export default {
    components: {
        AgGridVue
    },
    data() {
        return {
			localeText: AG_GRID_LOCALE_CN,
            // 部门信息
            department: "",
            // 所有数据
            allData: [],

            // 表格显示的行数据
            rows: [],
            defaultColDef: {
                sortable: true,
                resizable: true,
                filter: true,
                floatingFilter: true,
                minWidth: 120,
                flex: 1,
                cellStyle: {
                    'text-align': 'center',
                    'display': 'flex',
                    'align-items': 'center'
                }
            },
            columns: [
                {
                    headerName: "业务员",
                    field: "业务员",
                    pinned: 'left',
                    width: 150,
                    filter: 'agTextColumnFilter'
                },
                {
                    headerName: "类型",
                    field: "类型",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                },
                {
                    headerName: "单号",
                    field: "单号",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                },
                {
                    headerName: "客商",
                    field: "客商",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                },
                {
                    headerName: "币种",
                    field: "币种",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                },
                {
                    headerName: "料品",
                    field: "料品",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                },
                {
                    headerName: "数量",
                    field: "数量",
                    filter: 'agNumberColumnFilter',
                    valueFormatter: params => params.value.toLocaleString()
                }
            ]
        };
    },
    computed: {
    },
    async mounted() {
        try {
            // 显示加载提示
            this.$q.loading.show();
            // 获取部门信息
            this.department = this.$route.query.dep;
            // 获取所有数据
            this.allData = await this.$API.free.Bmmx.get(10001);
            // 初始化表格数据
            this.rows = this.allData;
			console.log(this.rows)
            // 初始化选项
            this.salespersonOptions = ["全部", ...new Set(this.allData.map(item => item.业务员))];
            this.typeOptions = ["全部", ...new Set(this.allData.map(item => item.类型))];
        } catch (error) {
            console.error("数据加载失败:", error);
        } finally {
            // 隐藏加载提示
            this.$q.loading.hide();
        }
    },
    methods: {
    },
};
</script>

<style>
@import "ag-grid-community/styles/ag-grid.css";
@import "ag-grid-community/styles/ag-theme-alpine.css";



</style>
